<template>
	<el-drawer size="40%" v-model="baTable.table.showComSearch">
		<template #header>
			<h4>筛选</h4>
		</template>
		<template #default>
			<el-form @submit.prevent="" @keyup.enter="onComSearch" :model="baTable.comSearch.form" label-width="auto" status-icon>
				<div v-for="(item, idx) in baTable.table.column">
					<div v-if="item.operator !== false">
						<div
							v-if="item.comSearchRender == 'customRender' || item.comSearchRender == 'slot'"
							v-bind="{
								xs: item.comSearchColAttr?.xs ? item.comSearchColAttr?.xs : 24,
								sm: item.comSearchColAttr?.sm ? item.comSearchColAttr?.sm : 6,
								...item.comSearchColAttr
							}"
						>
							<!-- 外部可以使用 :deep() 选择器修改css样式 -->
							<el-form-item v-if="item.comSearchShowLabel !== false" :label="item.label">
								<div class="com-search-col-input">
									<!-- 自定义组件/函数渲染 -->
									<component
										v-if="item.comSearchRender == 'customRender'"
										:is="item.comSearchCustomRender"
										:renderRow="item"
										:renderField="item.prop!"
										:renderValue="baTable.comSearch.form[item.prop!]"
									/>

									<!-- 自定义渲染-slot -->
									<slot v-else-if="item.comSearchRender == 'slot'" :name="item.comSearchSlotName"></slot>
								</div>
							</el-form-item>
						</div>

						<div v-else-if="item.render == 'datetime' && (item.operator == 'RANGE' || item.operator == 'NOT RANGE')">
							<el-form-item v-if="item.comSearchShowLabel !== false" :label="item.label">
								<div class="com-search-col-input-range w83">
									<el-date-picker
										class="datetime-picker"
										v-model="baTable.comSearch.form[item.prop!]"
										:default-value="baTable.comSearch.form[item.prop! + '-default'] ? baTable.comSearch.form[item.prop! + '-default']:[new Date(), new Date()]"
										:type="item.comSearchRender == 'date' ? 'daterange' : 'datetimerange'"
										range-separator="到"
										start-placeholder="开始时间"
										end-placeholder="结束时间"
										:value-format="item.comSearchRender == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
										:teleported="false"
									/>
								</div>
							</el-form-item>
						</div>

						<div v-else>
							<el-form-item v-if="item.comSearchShowLabel !== false" :label="item.label">
								<div v-if="item.operator == 'RANGE' || item.operator == 'NOT RANGE'" class="com-search-col-input-range">
									<el-input
										:placeholder="item.operatorPlaceholder"
										type="string"
										v-model="baTable.comSearch.form[item.prop! + '-start']"
										:clearable="true"
									></el-input>
									<div class="range-separator">到</div>
									<el-input
										:placeholder="item.operatorPlaceholder"
										type="string"
										v-model="baTable.comSearch.form[item.prop! + '-end']"
										:clearable="true"
									></el-input>
								</div>
								<!-- 是否 [NOT] NULL -->
								<div v-else-if="item.operator == 'NULL' || item.operator == 'NOT NULL'" class="com-search-col-input">
									<el-checkbox v-model="baTable.comSearch.form[item.prop!]" :label="item.operator" size="large"></el-checkbox>
								</div>
								<div v-else-if="item.operator" class="com-search-col-input">
									<!-- 时间筛选 -->
									<el-date-picker
										class="datetime-picker"
										v-if="item.render == 'datetime' || item.comSearchRender == 'date'"
										v-model="baTable.comSearch.form[item.prop!]"
										:type="item.comSearchRender == 'date' ? 'date' : 'datetime'"
										:value-format="item.comSearchRender == 'date' ? 'YYYY-MM-DD' : 'YYYY-MM-DD HH:mm:ss'"
										:placeholder="item.operatorPlaceholder"
										:default-value="baTable.comSearch.form[item.prop! + '-default'] ? baTable.comSearch.form[item.prop! + '-default']:new Date()"
										:teleported="false"
									/>

									<!-- tag、tags、select -->
									<el-select
										class="w100"
										:placeholder="item.operatorPlaceholder"
										v-else-if="
											(item.render == 'tag' || item.render == 'tags' || item.comSearchRender == 'select') && item.replaceValue
										"
										v-model="baTable.comSearch.form[item.prop!]"
										:clearable="true"
									>
										<el-option v-for="(opt, okey) in item.replaceValue" :key="item.prop! + okey" :label="opt" :value="okey" />
									</el-select>

									<!-- 远程 select -->
									<BaInput
										v-else-if="item.comSearchRender == 'remoteSelect'"
										type="remoteSelect"
										v-model="baTable.comSearch.form[item.prop!]"
										:attr="item.remote"
										:placeholder="item.operatorPlaceholder"
									/>

									<!-- 开关 -->
									<el-select
										:placeholder="item.operatorPlaceholder"
										v-else-if="item.render == 'switch'"
										v-model="baTable.comSearch.form[item.prop!]"
										:clearable="true"
										class="w100"
									>
										<template v-if="!isEmpty(item.replaceValue)">
											<el-option v-for="(opt, okey) in item.replaceValue" :key="item.prop! + okey" :label="opt" :value="okey" />
										</template>
										<template v-else>
											<el-option label="打开" value="1" />
											<el-option label="关闭" value="0" />
										</template>
									</el-select>

									<!-- 字符串 -->
									<el-input
										:placeholder="item.operatorPlaceholder"
										v-else
										type="string"
										v-model="baTable.comSearch.form[item.prop!]"
										:clearable="true"
									></el-input>
								</div>
							</el-form-item>
						</div>
					</div>
				</div>
			</el-form>
		</template>
		<template #footer>
			<div style="flex: auto">
				<div class="com-search-col pl-20">
					<el-button v-blur @click="onComSearch" type="primary">搜索</el-button>
					<el-button @click="onResetForm()">重置</el-button>
				</div>
			</div>
		</template>
	</el-drawer>
</template>

<script setup lang="ts">
import { inject } from "vue"
import type baTableClass from "/@/utils/baTable"
import { isEmpty } from "lodash-es"
import BaInput from "/@/components/baInput/index.vue"

const baTable = inject("baTable") as baTableClass

const onComSearch = () => {
	let comSearchData: comSearchData[] = []

	let m = new Map()

	for (let aa in baTable.table.column) {
		m.set(baTable.table.column[aa].prop, baTable.table.column[aa])
	}
	for (const key in baTable.comSearch.form) {
		if (!baTable.comSearch.fieldData.has(key)) {
			let val = baTable.comSearch.form[key]
			if (val == "") {
				continue
			}
			let fieldDataTemp = m.get(key)

			if (fieldDataTemp.render == "datetime" && (fieldDataTemp.operator == "RANGE" || fieldDataTemp.operator == "NOT RANGE")) {
				// 时间范围组件返回的是时间数组
				if (baTable.comSearch.form[key] && baTable.comSearch.form[key].length >= 2) {
					// 数组转字符串，以实现通过url参数传递预设搜索值
					if (fieldDataTemp.comSearchRender == "date") {
						val = baTable.comSearch.form[key][0] + " 00:00:00" + "," + baTable.comSearch.form[key][1] + " 23:59:59"
					} else {
						val = baTable.comSearch.form[key][0] + "," + baTable.comSearch.form[key][1]
					}
				}
			} else if (fieldDataTemp.operator == "RANGE" || fieldDataTemp.operator == "NOT RANGE") {
				// 普通的范围筛选，baTable在初始化时已准备好start和end字段
				if (!baTable.comSearch.form[key + "-start"] && !baTable.comSearch.form[key + "-end"]) {
					continue
				}
				val = baTable.comSearch.form[key + "-start"] + "," + baTable.comSearch.form[key + "-end"]
			} else if (baTable.comSearch.form[key]) {
				val = baTable.comSearch.form[key]
			}

			if (val) {
				comSearchData.push({
					field: key,
					val: val,
					operator: fieldDataTemp.operator
				})
			}
		} else {
			let val = ""
			let fieldDataTemp = baTable.comSearch.fieldData.get(key)
			if (fieldDataTemp.render == "datetime" && (fieldDataTemp.operator == "RANGE" || fieldDataTemp.operator == "NOT RANGE")) {
				// 时间范围组件返回的是时间数组
				if (baTable.comSearch.form[key] && baTable.comSearch.form[key].length >= 2) {
					// 数组转字符串，以实现通过url参数传递预设搜索值
					if (fieldDataTemp.comSearchRender == "date") {
						val = baTable.comSearch.form[key][0] + " 00:00:00" + "," + baTable.comSearch.form[key][1] + " 23:59:59"
					} else {
						val = baTable.comSearch.form[key][0] + "," + baTable.comSearch.form[key][1]
					}
				}
			} else if (fieldDataTemp.operator == "RANGE" || fieldDataTemp.operator == "NOT RANGE") {
				// 普通的范围筛选，baTable在初始化时已准备好start和end字段
				if (!baTable.comSearch.form[key + "-start"] && !baTable.comSearch.form[key + "-end"]) {
					continue
				}
				val = baTable.comSearch.form[key + "-start"] + "," + baTable.comSearch.form[key + "-end"]
			} else if (baTable.comSearch.form[key]) {
				val = baTable.comSearch.form[key]
			}
			if (val) {
				comSearchData.push({
					field: key,
					val: val,
					operator: fieldDataTemp.operator,
					render: fieldDataTemp.render,
					tableName: fieldDataTemp.tableName
				})
			}
		}
	}

	baTable.onTableAction("com-search", comSearchData)
	baTable.table.showComSearch = false
}

const onResetForm = () => {
	// 封装好的onResetForm在此处不能使用
	for (const key in baTable.comSearch.form) {
		baTable.comSearch.form[key] = ""
	}
	onComSearch()
}
</script>

<style scoped lang="scss">
.table-com-search {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	background-color: var(--ba-bg-color-overlay);
	border: 1px solid var(--ba-border-color);
	border-bottom: none;
	padding: 13px 15px;
	font-size: 14px;

	.com-search-col {
		display: flex;
		align-items: center;
		padding-top: 8px;
		color: var(--el-text-color-regular);
		font-size: 13px;
	}

	.com-search-col-label {
		width: 33.33%;
		padding: 0 15px;
		text-align: right;
		overflow: hidden;
		white-space: nowrap;
	}

	.com-search-col-input {
		padding: 0 15px;
		width: 66.66%;
	}

	.com-search-col-input-range {
		display: flex;
		align-items: center;
		padding: 0 15px;
		width: 66.66%;

		.range-separator {
			padding: 0 5px;
		}
	}
}

:deep(.datetime-picker) {
	width: 100%;
}

.pl-20 {
	padding-left: 20px;
}

.w16 {
	width: 16.5% !important;
}

.w83 {
	width: 83.5% !important;
}
</style>
